<template>
	<view class="top-navigation-box" :style="{color:color}">
		<view @click="backMethod()" class="back" :style="{color:color}">{{back}}</view>
		<view class="title">{{title}}</view>

		<view @click="moreMethod()" class="right">{{more}}</view>
	</view>
</template>

<script>
	export default {
		name: "top-navigation",
		props: {
			'back': {
				type: String,
				default: '<'
			},
			'title': {
				type: String,
				default: ''
			},
			'more': {
				type: String,
				default: ''
			},
			"isShowMore": {
				type: Boolean,
				default: false
			},
			"isShowMoreBox": {
				type: Boolean,
				default: false
			},
			'color': {
				type: String,
				default: '#16222e'
			}
		},
		data() {
			return {};
		},

		methods: {
			backMethod() {
				this.$emit('back');
			},
			moreMethod() {
				this.$emit('more');
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top-navigation-box {
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		background-color: #fde4bc;
		color: #16222e;
		padding: 0 2%;
		box-sizing: border-box;
		font-size: 30rpx;

		>view {
			width: 33.33%;
		}

		.title {
			text-align: center;
			letter-spacing: 1rpx;
		}

	}
</style>